البرمجة

تصميم صفحة موقع باستخدام Bootstrap

اخر تحديث 10/06/2025
18 تمت قراءة 2 دقيقة

تصميم صفحة موقع باستخدام Bootstrap 3 – الجزء الأول

تُعتبر أُطر العمل (Frameworks) الخاصة بتصميم واجهات المواقع من أهم الأدوات التي يُمكن أن يعتمد عليها المطورون لبناء صفحات ويب متجاوبة، سريعة، وسهلة التعديل. ومن بين أشهر هذه الأُطر، يأتي Bootstrap 3 كواحد من أبرز وأشهر أُطر العمل التي وفرت نقلة نوعية في مجال تطوير وتصميم الواجهات الأمامية (Front-End)، لما يتمتع به من سهولة في الاستخدام، مرونة كبيرة، ودعم متكامل لأحدث تقنيات الويب.

في هذا المقال، سنُسلط الضوء على كيفية تصميم صفحة موقع متكاملة باستخدام Bootstrap 3، مع التركيز على المفاهيم الأساسية، العناصر الأساسية، والميزات التي يقدمها Bootstrap 3، بالإضافة إلى كيفية الاستفادة منها لتطوير صفحات ويب متجاوبة ذات تصميم حديث ومتناسق.

مواضيع ذات صلة

ما هو Bootstrap 3؟

Bootstrap 3 هو إطار عمل (CSS, JavaScript, HTML) مفتوح المصدر أنشأته شركة Twitter في البداية، ثم أصبح مشروعًا مستقلًا يدعمه مجتمع واسع من المطورين. الهدف الأساسي منه هو تبسيط وتوحيد عملية تطوير وتصميم الواجهات الأمامية للمواقع الإلكترونية والتطبيقات عبر مجموعة من القواعد، الأدوات، والمكونات الجاهزة.

تم إصدار Bootstrap 3 في عام 2013، وشهد هذا الإصدار تطورًا كبيرًا عن النسخ السابقة، خاصة من حيث الاستجابة (Responsive Design) التي أصبحت جزءًا لا يتجزأ منه، مما يسمح للصفحات بأن تتكيف مع أحجام الشاشات المختلفة بدءًا من الهواتف المحمولة وحتى شاشات الحواسيب الكبيرة.

الميزات الرئيسية لـ Bootstrap 3

  • تصميم متجاوب مدمج بالكامل: باستخدام نظام شبكة (Grid System) متطور يعتمد على 12 عموداً، يتيح Bootstrap 3 بناء تخطيطات ديناميكية تتغير تلقائيًا بحسب حجم الشاشة.

  • مكونات جاهزة: يوفر مجموعة كبيرة من المكونات الجاهزة للاستخدام مثل الأزرار، النماذج، القوائم، الأشرطة التنقلية (Navbars)، الجداول، والنوافذ المنبثقة (Modals).

  • دعم متكامل للمتصفحات: تم اختبار Bootstrap 3 ليعمل بسلاسة على جميع المتصفحات الحديثة وشعبية الاستخدام.

  • سهولة التخصيص: يمكن تعديل أنماط Bootstrap بسهولة عبر ملفات CSS الخاصة بالمستخدم أو عبر استخدام SASS/LESS.

  • تكامل مع JavaScript: يتضمن مكتبة JavaScript الخاصة به التي توفر وظائف تفاعلية متقدمة مثل القوائم المنسدلة، الأكورديونات، والسلايدر.

كيف تبدأ تصميم صفحة موقع باستخدام Bootstrap 3؟

لبناء صفحة موقع باستخدام Bootstrap 3، هناك عدة خطوات أساسية يجب اتباعها لضمان نجاح التصميم وتحقيق تجربة مستخدم ممتازة.

1. إعداد البيئة وتحميل Bootstrap 3

أول خطوة هي إدراج ملفات Bootstrap الضرورية داخل صفحة HTML الخاصة بالمشروع. هناك طريقتان رئيسيتان لذلك:

  • تحميل الملفات محليًا: حيث تقوم بتحميل ملفات CSS وJavaScript من الموقع الرسمي Bootstrap وتضمينها في مشروعك.

  • استخدام CDN: وهي أسهل وأسرع طريقة عبر تضمين روابط خارجية مباشرة توفرها شبكة توزيع المحتوى.

مثال على تضمين Bootstrap 3 عبر CDN:

html
html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صفحة موقع باستخدام Bootstrap 3title>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
head>
<body>

  

  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>
body>
html>

يُعتبر تضمين مكتبة jQuery ضروريًا لأن Bootstrap 3 يعتمد عليها في تشغيل المكونات التفاعلية.

2. نظام الشبكة Grid System في Bootstrap 3

أحد أهم عناصر Bootstrap 3 هو نظام الشبكة الذي يعتمد على تقسيم الصفحة إلى 12 عمودًا. هذا النظام يتيح تحكمًا دقيقًا في تنظيم المحتوى على الصفحة بطريقة مرنة ومتجاوبة مع مختلف الأجهزة.

مبدأ عمل النظام

  • يتم تقسيم العرض الكلي للصفحة إلى 12 عمود.

  • يمكن دمج عدة أعمدة معًا لإنشاء تخطيطات مختلفة.

  • هناك أربعة أنماط عرض (Breakpoints) يتم ضبط الأعمدة بناءً عليها:

نقطة توقف وصف فئة الكلاس (Class)
xs شاشات الهواتف الذكية (<768px) .col-xs-*
sm شاشات الأجهزة اللوحية (≥768px) .col-sm-*
md شاشات الكمبيوتر المكتبي (≥992px) .col-md-*
lg شاشات كبيرة جدًا (≥1200px) .col-lg-*

يمكن استخدام هذه الكلاسات لتحديد عدد الأعمدة التي يشغلها عنصر معين في كل حجم شاشة.

مثال على استخدام نظام الشبكة:

html
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">عمود 1div>
    <div class="col-md-4 col-sm-6 col-xs-12">عمود 2div>
    <div class="col-md-4 col-sm-12 col-xs-12">عمود 3div>
  div>
div>

في هذا المثال:

  • في الشاشات الكبيرة (md)، كل عمود يأخذ 4 أعمدة (أي 3 أعمدة متساوية في صف واحد).

  • في الأجهزة اللوحية (sm)، العمود الأول والثاني يأخذان 6 أعمدة، والثالث يأخذ 12 عمودًا، مما يجعله يظهر في سطر منفصل.

  • في الهواتف (xs)، كل عمود يشغل كامل العرض (12 عمودًا).

3. استخدام الحاويات (Containers)

تُستخدم الحاويات لتوفير إطار عرض ثابت أو مرن للمحتوى داخل الصفحة. يوجد نوعان رئيسيان من الحاويات في Bootstrap 3:

  • .container: حاوية بعرض ثابت يتغير عند نقاط التوقف المختلفة.

  • .container-fluid: حاوية بعرض كامل الشاشة، أي ممتدة بعرض النافذة دون هوامش جانبية.

اختيار نوع الحاوية يعتمد على نوع التصميم المطلوب، فالحاوية الثابتة تضمن توازنًا بين المحتوى والفراغ حوله، بينما الحاوية السائلة مناسبة لتصاميم الشاشة الكاملة.

4. القوائم التنقلية Navbar

من أكثر العناصر استخدامًا في صفحات المواقع هي شريط التنقل أو القائمة العلوية (Navbar). يقدم Bootstrap 3 مكونًا متكاملاً لإنشاء قوائم تنقل احترافية ومتجاوبة بسهولة.

الهيكل الأساسي لقائمة Navbar:

html
<nav class="navbar navbar-default">
  <div class="container-fluid">
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
        <span class="sr-only">تبديل التنقلspan>
        <span class="icon-bar">span>
        <span class="icon-bar">span>
        <span class="icon-bar">span>
      button>
      <a class="navbar-brand" href="#">الشعارa>
    div>

    
    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">الرئيسيةa>li>
        <li><a href="#">عن الموقعa>li>
        <li><a href="#">الخدماتa>li>
        <li><a href="#">اتصل بناa>li>
      ul>
    div>
  div>
nav>

في هذا المثال:

اخر تحديث 10/06/2025
18 تمت قراءة 2 دقيقة